<template>
  <div class="home-view">
    <div class="header-actions">
      <h1>我的待办事项</h1>
      <el-button type="primary" @click="showAddTodoDialog = true">
        添加待办事项
      </el-button>
    </div>
    
    <div class="filters">
      <el-select v-model="selectedCategory" placeholder="按分类筛选" clearable>
        <el-option
          v-for="category in todoStore.categories"
          :key="category.id"
          :label="category.name"
          :value="category.id"
        />
      </el-select>
      
      <el-select v-model="selectedTag" placeholder="按标签筛选" clearable>
        <el-option
          v-for="tag in todoStore.tags"
          :key="tag.id"
          :label="tag.name"
          :value="tag.id"
        />
      </el-select>
      
      <el-select v-model="statusFilter" placeholder="按状态筛选">
        <el-option label="全部" value="all" />
        <el-option label="未完成" value="active" />
        <el-option label="已完成" value="completed" />
      </el-select>
    </div>
    
    <el-empty v-if="filteredTodos.length === 0" description="暂无待办事项" />
    
    <div v-else class="todo-list">
      <todo-item
        v-for="todo in filteredTodos"
        :key="todo.id"
        :todo="todo"
        @update="handleUpdateTodo"
        @delete="handleDeleteTodo"
      />
    </div>
    
    <add-todo-dialog
      v-model:visible="showAddTodoDialog"
      @add="handleAddTodo"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useTodoStore } from '../stores/todo'
import TodoItem from '../components/todo/TodoItem.vue'
import AddTodoDialog from '../components/todo/AddTodoDialog.vue'

const todoStore = useTodoStore()
const showAddTodoDialog = ref(false)
const selectedCategory = ref(null)
const selectedTag = ref(null)
const statusFilter = ref('all')

onMounted(async () => {
  await Promise.all([
    todoStore.fetchTodos(),
    todoStore.fetchCategories(),
    todoStore.fetchTags()
  ])
})

const filteredTodos = computed(() => {
  let result = [...todoStore.todos]
  
  // 按分类筛选
  if (selectedCategory.value) {
    result = result.filter(todo => todo.category && todo.category.id === selectedCategory.value)
  }
  
  // 按标签筛选
  if (selectedTag.value) {
    result = result.filter(todo => 
      todo.tags && todo.tags.some(tag => tag.id === selectedTag.value)
    )
  }
  
  // 按状态筛选
  if (statusFilter.value === 'active') {
    result = result.filter(todo => !todo.completed)
  } else if (statusFilter.value === 'completed') {
    result = result.filter(todo => todo.completed)
  }
  
  return result
})

const handleAddTodo = async (todo) => {
  await todoStore.addTodo(todo)
  showAddTodoDialog.value = false
}

const handleUpdateTodo = async (id, updates) => {
  // 如果updates中包含tags字段，将其改为tagIds
  if (updates.tags) {
    updates.tagIds = updates.tags
    delete updates.tags
  }
  
  // 如果updates中包含priority字段，移除它
  if ('priority' in updates) {
    delete updates.priority
  }
  
  await todoStore.updateTodo(id, updates)
}

const handleDeleteTodo = async (id) => {
  await todoStore.deleteTodo(id)
}
</script>

<style scoped>
.home-view {
  width: 100%;
}

.header-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.filters {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

.todo-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (max-width: 768px) {
  .header-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  
  .filters {
    flex-direction: column;
    width: 100%;
  }
}
</style>